<template lang="pug">
.page
  .CustomerSalary
    //- .search-form.mb-25.pl-10.pr-10
    //-   Row.mb-15(type="flex" justify="start")
    //-     Col.pr-20(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
    //-       span.label-txt.w80 客户名称：
    //-       Input(v-model="formData.name" placeholder="请输入" clearable)
    //-     Col.pr-20(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
    //-       span.label-txt.w80 工资月份：
    //-       DatePicker.w-100(v-model="formData.month" placeholder="请选择" type="month" format="yyyy-MM" @on-change="datePickerChange" :clearable="false")
    //-     Col.pr-20.mb-15(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
    //-       span.label-txt.w80 合作类型：
    //-       Select(v-model="formData.cooperateType" placeholder="请选择合作类型" clearable)
    //-         Option(v-for="(item, index) in arrListDown.type" :value="item.value" :key="index") {{ item.label }}
    //-     Col.pr-20.mb-15(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
    //-       span.label-txt.w80 参保地区：
    //-       Cascader(v-model="formData.areaName" placeholder="请选择参保地区" :filterable="true" :data="areaArr" :change-on-select="true" :load-data="loadDataCity" style="flex:1;")
    //-     Col.pr-20.mb-15(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
    //-       span.label-txt.w80 所属客服：
    //-       Select(v-model="formData.serverId" placeholder="请选择所属客服" filterable clearable)
    //-         Option(v-for="(item, index) in arrListDown.status" :value="item.value" :key="index") {{ item.label }}
    //-     Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
    //-       Button(v-if="hasFind" type="info" @click="searchFn") 查询
    .search-form.mb-10.pr-10
      Form.ivu-row.ivu-form-basic(ref="formData" :model="formData" :rules="rules" :label-width="90")
        FormItem.form-item.ivu-col.pr-20.mb-15(v-for="(item, index) of setFormItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
          template(v-if="item.type === 'select'")
            Select(v-model="formData[item.model]" :placeholder="item.placeholder" clearable filterable)
              Option(
                v-for="(c_item, index) in arrListDown[item.options]"
                :value="c_item.value"
                :key="index"
              ) {{ c_item.label }}
          template(v-if="item.type === 'input'")
            Input(v-model="formData[item.model]" :placeholder="item.placeholder" clearable)
          //- template(v-if="item.type === 'datePicker'")
          //-   DatePicker.w-100(:value="formData[item.model]" :placeholder="item.placeholder" type="month" @on-change="handleChangeDatePicker(item.model, $event)")
          template(v-if="item.type === 'datePicker'")
            DatePicker.pull-left.interval-date-140(:value="formData.salaryBeginMonth" placeholder="开始日期" type="month" @on-change="handleChangeDatePicker('salaryBeginMonth', $event)")
            span.pl-10.pr-10.pull-left.line-h-32 --
          template(v-if="item.type === 'datePicker'")
            DatePicker.pull-left.interval-date-140.mr-20(:value="formData.salaryEndMonth" placeholder="结束日期" type="month" @on-change="handleChangeDatePicker('salaryEndMonth', $event)")
          template(v-if="item.type === 'datePickerTax'")
            DatePicker.pull-left.interval-date-140(:value="formData.taxBeginMonth" placeholder="开始日期" type="month" @on-change="handleChangeDatePicker('taxBeginMonth', $event)")
            span.pl-10.pr-10.pull-left.line-h-32 --
          template(v-if="item.type === 'datePickerTax'")
            DatePicker.pull-left.interval-date-140.mr-20(:value="formData.taxEndMonth" placeholder="结束日期" type="month" @on-change="handleChangeDatePicker('taxEndMonth', $event)")
          template(v-if="item.type === 'cascader'")
            .areaTree
              Cascader(v-model="formData[item.model]" :data="areaTree" clearable change-on-select @on-change="areaTreeChange(item.model, $event)")
          template(v-if="item.type === 'button'")
            Button(v-if="hasFind" type="info" @click="searchFn") 查询

    .pl-20.pr-20.bg-white
      Table.hasTitle-table.beautiful-table(:columns="setThead" :data="tableData" :stripe="true"
        @on-selection-change="handleOnSelectChange"
      )
        .clearfix.font-16(slot="header")
          .table-title-lefttxt.pull-left
            |合计
            span.text-info.pl-5.pr-5.font-weight {{tableComone.totalRows}}
            |条
          .pull-right.table-title-btns
            //- Button.mr-10(v-if="hasExport" type="info" ghost @click="handleExportTax") 导出纳税申报表
            Button.mr-10(v-if="hasGetImportConfig" type="info" @click="handleShowCustomerSalaryImportModal") 导入
            Button.mr-10(v-if="hasImportMultiple" type="info" @click="handleShowBatchImportSalaryModal") 批量导入
            Button.mr-10(v-if="hasExportList" type="info" ghost @click="handleExport") 导出
            Button.mr-10(v-if="hasExport" type="info" ghost @click="handleExportSalary") 导出明细
            //- Button.mr-10(v-if="hasImportResult" type="info" @click="handleShowCustomerSalaryResultImportModal") 结果导入
            Button.mr-10(v-if="hasDelete" type="warning" @click="isDeleteModal" :disabled="!selectedIdArr.length > 0") 删除
            //- Button.ml-10(v-if="errorData.isError" type="warning" @click="exportErrorFile") 导出错误数据
            //- a.font-14(v-if="errorData.isError" type="warning" :href="downLoadUrl") 导出错误数据

        template(slot-scope="{ row, index }" slot="action")
          //- Button(v-if="hasSubmitFinance && row.showSubmitFinance" type="text" size="small" @click="isSubmitFinanceModal(row.id, row.salaryMonth)") 提交财务
          Button(v-if="hasSalaryDetail" type="text" size="small" @click="goCustomerSalaryDetail(row.id, row.salaryMonth)") 明细
          //- Button(v-if="hasBack" type="text" size="small" @click="handleShowBackModal(row)") 退回

        .clearfix.pl-20.pr-20(slot="footer")
          Page(
            :current="tableComone.pageIndex"
            :total="tableComone.totalRows"
            @on-change="onChangePage"
            @on-page-size-change="onpageSizeChange"
            show-sizer
            show-total
            placement="top"
            prev-text="上一页"
            next-text="下一页"
            :page-size-opts="[10, 20, 30, 50, 100]"
          )

    CustomerSalaryImportModal(ref="CustomerSalaryImportModal" @uploadFileOk="uploadFileOk" @uploadSuccess="handleUploadSuccess"  @query="searchFn")
    //- 退回弹窗
    BackModal(ref="BackModal" @query="searchFn")
    //- 薪资导入弹窗
    CustomerSalaryResultImportModal(ref="CustomerSalaryResultImportModal" @query='searchFn')
    //- 批量导入弹窗
    BatchImportSalaryModal(ref="BatchImportSalaryModal" :axsEnableSwitch="axsEnableSwitch" @handleMaxSizeTen="handleMaxSizeTen" @query="searchFn")
</template>

<script>
import { Common } from '@/utils/common.js'
import dataApi from '@/api/data.js'
import { CustomerSalaryApi } from '@/api/CustomerSalary.api.js'
import { EmployeeSalaryApi } from '@/api/EmployeeSalary.api.js'
import { salaryThead, salaryTheadObj } from './CStableHead.js'
import _cloneDeep from 'clone-deep'
import CustomerSalaryImportModal from './modal/CustomerSalaryImportModal.vue'
import CustomerSalaryResultImportModal from './modal/CustomerSalaryResultImportModal.vue'

import BatchImportSalaryModal from './modal/batchImportSalaryModal.vue'
import BackModal from './modal/backModal.vue'
import { ProvinceList, AreaTree } from '@/utils/publicJson.js'
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro.replace('/api', '/')
export default {
  name: 'CustomerSalary',

  components: {
    CustomerSalaryImportModal,
    CustomerSalaryResultImportModal,
    BatchImportSalaryModal,
    BackModal
  },

  data () {
    return {
      oldThead: _cloneDeep(salaryThead),
      tableColumns: _cloneDeep(salaryTheadObj),
      thead: ['selection', 'taxTypeName', 'customerName', 'declareUnitName', 'salaryMonth', 'taxMonth', 'startEnd', 'deductionTypeName', 'payDate', 'incomeTypeName', 'statusName', 'shouldSalaryTotal', 'socialSecurityDeduct', 'providentFundDeduct', 'specialDeduct', 'otherDeduct', 'incomeDeduct', 'serviceCharge', 'afterTaxDeduct', 'realSalaryTotal', 'backReason', 'createdOn', 'action'],
      axsEnableSwitchThead: ['selection', 'taxTypeName', 'customerName', 'declareUnitName', 'salaryMonth', 'taxMonth', 'startEnd', 'deductionTypeName', 'payDate', 'incomeTypeName', 'statusName', 'shouldSalaryTotal', 'socialSecurityDeduct', 'providentFundDeduct', 'specialDeduct', 'otherDeduct', 'incomeDeduct', 'serviceCharge', 'afterTaxDeduct', 'realSalaryTotal', 'backReason', 'createdOn', 'action'],
      tableData: [],
      tableComone: {
        pageIndex: 1, // 页码
        totalRows: 0, // 总条数
        pageSize: 10 // 当前页面展示条数
      },
      formData: {
        name: '',
        month: new Date(),
        cooperateType: '',
        cityId: [],
        serverId: '',
        taskStatus: '',
        salaryBeginMonth: new Date().getFullYear()+'-'+(new Date().getMonth()+1),
        salaryEndMonth: new Date().getFullYear()+'-'+(new Date().getMonth()+1),
        taxBeginMonth: '',
        taxEndMonth: ''
      },
      formItem: [
        { type: 'datePicker', label: '工资月份：', placeholder: '请选择工资月份', prop: 'month', model: 'month', style: 'ivu-col-span-8' },
        { type: 'datePickerTax', label: '税款所属期：', placeholder: '请选择税款所属期', prop: 'month', model: 'month', style: 'ivu-col-span-8' },
        { type: 'select', label: '申报单位：', placeholder: '请选择申报单位', prop: 'declareUnitId', model: 'declareUnitId', style: 'ivu-col-span-8', options: 'unitList' },
        { type: 'button', style: 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-8 ivu-col-span-xxl-4' }
      ],
      rules: {},
      arrListDown: {
        type: [],
        server: [],
        status: [],
        taxtype: [],
        unitList: []
      },
      areaArr: [], // 区域数组
      selectedId: '', // 勾选的id集合
      selectedIdArr: [], // 勾选的id, name数组集合
      axsEnableSwitch: false,
      // errorData: {
      //   errorId: '',
      //   isError: false
      // },
      // downLoadUrl: '/api/CustomerSalary/ExportErrorFile?fileName='
      areaTree: [], // 中国所有城市树
      backReason: ''
    }
  },
  computed: {
    actionArr () {
      let arr = this.$store.state.user.actionAccess.map(item => {
        return item.code
      })
      return arr
    },
    // 导出
    hasExportList () {
      return this.actionArr.indexOf('ExportList') > -1
    },
    // 导出明细
    hasExport () {
      return this.actionArr.indexOf('Export') > -1
    },
    // 导入
    hasGetImportConfig () {
      return this.actionArr.indexOf('GetImportConfig') > -1
    },
    // 薪资明细
    hasSalaryDetail () {
      return this.actionArr.indexOf('SalaryDetail') > -1
    },
    // 退回
    hasBack () {
      return this.actionArr.indexOf('Back') > -1
    },
    // 查询
    hasFind () {
      return this.actionArr.indexOf('Find') > -1
    },

    // 批量导入
    hasImportMultiple () {
      return this.actionArr.indexOf('ImportMultiple') > -1
    },

    // 结果导入
    hasImportResult () {
      return this.actionArr.indexOf('ImportResult') > -1
    },
    
    // 删除
    hasDelete () {
      return this.actionArr.indexOf('Delete') > -1
    },
    // 提交财务
    hasSubmitFinance () {
      return this.actionArr.indexOf('SubmitFinance') > -1
    },

    setThead () {      
      if (!this.axsEnableSwitch) {
        return Common.getTableColumns(this.thead, this.tableColumns)
      } else {
        return Common.getTableColumns(this.axsEnableSwitchThead, this.tableColumns)
      }
    },

    setFormItem () {
      if (this.axsEnableSwitch) {
        return this.formItem
      } else {
        return [...this.formItem.slice(0, 5), ...this.formItem.slice(6, this.formItem.length + 1)]
      }
    }
  },

  watch: {
  },

  mounted () {
    this.servers()
    this.getEnum()
    this.getUnitList()
    this.query()
    this.getJson()
  },

  methods: {
    async getJson () {
      console.log('🍌')
      // this.arrListDown.cityId = ProvinceList // 全国省份列表
      this.areaTree = AreaTree // 获取中国所有城市树
      console.log('🌰')
      console.log('this.formData 🌰', this.formData)
    },

    // 数据字典
    getEnum () {
      let groupName = 'customer.type,customersalary.status,customersalary.taxtype'
      Common.getEnum(groupName, this.arrListDown)
      console.log('数据字典：', this.arrListDown)
    },

    // 获取客服
    async servers () {
      var params = {
        PageIndex: 1,
        PageSize: 100,
        Args: ''
      }
      Common.servers(params, this.arrListDown, 'server')
    },

    // 获取申报单位下拉
    getUnitList () {
      dataApi.getUnitList().then(resp => {
        if (resp.data.success) {
          console.log('获取申报单位下拉 resp: ', resp)
          this.arrListDown.unitList = resp.data.data.map(item => {
            return {label: item.name, value: item.id}
          })
        }
      })
    },

    /**
     * 分页页码变动
     * @param {Number} val pageIndex
     */
    onChangePage (val) {
      this.tableComone.pageIndex = val
      this.query()
    },
    /**
     * 分页页码变动
     * @param {Number} val pageSize
     */
    onpageSizeChange (val) {
      this.tableComone.pageSize = val
      this.query()
    },
    /**
     * 分页查询接口
     * @param {Object} obj {pageIndex, pageSize}
     */
    async query () {
      var params = {
        TaskStatus: this.formData.taskStatus,
        CooperateType: this.formData.cooperateType,
        CityId: this.formData.cityId[this.formData.cityId.length - 1],
        ServerId: this.formData.serverId,
        HasPaging: true,
        CustomerName: this.formData.name,
        // SalaryMonth: this.formData.month,
        PageIndex: this.tableComone.pageIndex,
        PageSize: this.tableComone.pageSize,
        SalaryBeginMonth: this.formData.salaryBeginMonth,
        SalaryEndMonth: this.formData.salaryEndMonth,
        TaxBeginMonth: this.formData.taxBeginMonth,
        TaxEndMonth: this.formData.taxEndMonth,
        Taxtype: this.formData.taxType
      }
      let res = await CustomerSalaryApi.getList(params)
      console.log('客户薪资res: ', res)
      if (res.status === 200 && res.data.success) {
        this.tableData = res.data.data
        this.tableComone.totalRows = res.data.totalRows
        this.axsEnableSwitch = res.data.axsEnableSwitch
        this.selectedIdArr = []
        this.selectedId = ''
      } else {
        this.tableData = []
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        })
      }
      this.loading = false
    },

    // 搜索
    searchFn () {
      this.tableComone.pageIndex = 1
      this.query()
    },

    goCustomerSalaryDetail (id, month) {
      this.$router.push({
        path: '/CustomerSalaryDetail',
        name: 'CustomerSalaryDetail',
        query: {
          id: id,
          month: month
        }
      })
    },

    // 导入薪资弹窗
    handleShowCustomerSalaryImportModal () {
      this.$refs.CustomerSalaryImportModal.show() // 显示弹窗
      this.$refs.CustomerSalaryImportModal.errorData.isError = false // 隐藏错误数据下载按钮
      this.$refs.CustomerSalaryImportModal.isCanUpload = true // 可导入按钮
      this.$refs.CustomerSalaryImportModal.salaryStartTimeDefault = new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1), // 上个月1号
      this.$refs.CustomerSalaryImportModal.salaryEndTimeDefault = new Date(new Date().getFullYear(), new Date().getMonth() - 1, 30), // 上个月30号
      this.$refs.CustomerSalaryImportModal.handleClearFiles()
      // this.$refs.CustomerSalaryImportModal.formImport = { // 置空所有表单内容
      //   customerId: '',
      //   customerName: '',
      //   salaryMonth: '', // 计薪月份
      //   payDay: '',
      //   salaryStartTime: '',
      //   salaryEndTime: '',
      //   incomeType: '',
      //   fileName: ''
      // }
    },

    handleShowCustomerSalaryResultImportModal () {
      this.$refs.CustomerSalaryResultImportModal.show() // 显示弹窗
      this.$refs.CustomerSalaryResultImportModal.errorData.isError = false // 隐藏错误数据下载按钮
      this.$refs.CustomerSalaryResultImportModal.isCanUpload = true // 可导入按钮
      this.$refs.CustomerSalaryResultImportModal.salaryStartTimeDefault = new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1), // 上个月1号
      this.$refs.CustomerSalaryResultImportModal.salaryEndTimeDefault = new Date(new Date().getFullYear(), new Date().getMonth() - 1, 30), // 上个月30号
      this.$refs.CustomerSalaryResultImportModal.handleClearFiles()
    },

    // 批量导入-显示弹窗
    handleShowBatchImportSalaryModal () {
      this.$refs.BatchImportSalaryModal.show()
      this.$refs.BatchImportSalaryModal.file = null
      this.$refs.BatchImportSalaryModal.errorData.isError = false
      // this.$refs.BatchImportSalaryModal.year = this.$moment(this.tableData[0].salaryMonth).format('YYYY')
    },

    // 退回-显示弹窗
    handleShowBackModal (row) {
      console.log('row: ', row)
      this.$refs.BackModal.show(row)
    },

    // 表格选择操作
    handleOnSelectChange (value) {
      this.selectedIdArr = value.map((item) => {
        return { id: item.id, name: item.name }
      })
      let arr = value.map((item) => {
        return item.id
      })
      this.selectedId = arr.join(',')
      console.log('列表勾选数组', this.selectedIdArr)
      console.log('列表勾选数组字符串', this.selectedId)
    },

    // 日期选择
    datePickerChange (e) {
      this.formData.month = e
    },

    uploadFileOk (importExcel) {
      console.log('importExcel: ', importExcel)
      var concatArr = this.tableData.concat(importExcel.tableData)
      this.tableData = concatArr
      console.log('this.tableData: ', this.tableData)
    },

    handleUploadSuccess (res) {
      console.log('上传res: ', res)
    },
    // importSuccess () {
    //   this.errorData.isError = false
    // },

    // importFail (res) {
    //   this.errorData.isError = true
    //   console.log('fffffffffffffff ', res)
    //   this.downLoadUrl = this.downLoadUrl + res.data
    //   console.log('url ', this.downLoadUrl)
    // }

    // 是否删除前询问
    isDeleteModal () {
      this.$Modal.confirm({
        title: '是否确认删除选中的信息',
        onOk: () => {
          this.handleDelete()
        }
      })
    },

    async handleDelete () {
      var params = {
        id: this.selectedId,
        year: this.$moment(this.tableData[0].salaryMonth).format('YYYY')
      }
      console.log('🌈', params)
      let res = await CustomerSalaryApi.delete(params)
      console.log('删除res: ', res)
      if (res.status === 200 && res.data.success) {
        this.$Message.success(res.data.message)
        this.tableComone.pageIndex = 1
        this.query()
      } else {
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        })
      }
    },

    // 是否提交财务前询问
    isSubmitFinanceModal (id, month) {
      this.$Modal.confirm({
        title: '是否确认提交财务',
        onOk: () => {
          // console.log('是！')
          this.handleSureSubmitFinance(id, month)
        }
      })
    },

    // 确认提交
    async handleSureSubmitFinance (id, month) {
      var params = {
        ID: id,
        Year: this.$moment(month).format('YYYY') //审核结果
      }
      console.log('params: ', params)
      let res = await CustomerSalaryApi.submitFinance(params)
      if (res.data.success) {
        this.$Message.success(res.data.message)
      } else {
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        })
      }
      this.query()
    },

    // 时间控件
    handleChangeDatePicker (model, value) {
      this.formData[model] = value
    },

    // 所在地区选择
    areaTreeChange (model, value) {
      this.formData[model] = value
    },

    handleMaxSizeTen () {
      this.$Message.error({
        content: '您上传的文件太大，上传文件大小不能超过10M',
        duration: 10,
        closable: true
      })
    },

    // 导出
    async handleExport (exportType) {
      var params = {
        CooperateType: this.formData.cooperateType,
        CityId: this.formData.cityId[this.formData.cityId.length - 1],
        ServerId: this.formData.serverId,
        CustomerName: this.formData.name,
        // SalaryMonth: this.formData.month,
        Ids: this.selectedId,
        SalaryBeginMonth: this.formData.salaryBeginMonth,
        SalaryEndMonth: this.formData.salaryEndMonth,
        TaxBeginMonth: this.formData.taxBeginMonth,
        TaxEndMonth: this.formData.taxEndMonth,
        Taxtype: this.formData.taxType
      }
      CustomerSalaryApi.export(params).then(res => {
        console.log('导出: ', res)
        if (res.status === 200 && res.data.success) {
          console.log('❤ 返回链接: ', baseUrl + res.data.data)
          window.open(baseUrl + res.data.data, '_blank')
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },

    // 导出明细
    async handleExportSalary (exportType) {
      var params = {
        CooperateType: this.formData.cooperateType,
        CityId: this.formData.cityId[this.formData.cityId.length - 1],
        ServerId: this.formData.serverId,
        CustomerName: this.formData.name,
        // SalaryMonth: this.formData.month,
        SalaryGUID: this.selectedId,
        SalaryBeginMonth: this.formData.salaryBeginMonth,
        SalaryEndMonth: this.formData.salaryEndMonth,
        TaxBeginMonth: this.formData.taxBeginMonth,
        TaxEndMonth: this.formData.taxEndMonth,
        Taxtype: this.formData.taxType
      }
      EmployeeSalaryApi.export(params).then(res => {
        console.log('导出: ', res)
        if (res.status === 200 && res.data.success) {
          console.log('❤ 返回链接: ', baseUrl + res.data.data)
          window.open(baseUrl + res.data.data, '_blank')
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },

    // 导出纳税申报表
    async handleExportTax (exportType) {
      console.log('导出纳税申报表')
      var params = {
        CooperateType: this.formData.cooperateType,
        CityId: this.formData.cityId[this.formData.cityId.length - 1],
        ServerId: this.formData.serverId,
        CustomerName: this.formData.name,
        // SalaryMonth: this.formData.month,
        SalaryGUID: this.selectedId,
        SalaryBeginMonth: this.formData.salaryBeginMonth,
        SalaryEndMonth: this.formData.salaryEndMonth,
        TaxBeginMonth: this.formData.taxBeginMonth,
        TaxEndMonth: this.formData.taxEndMonth,
        Taxtype: this.formData.taxType
      }
      EmployeeSalaryApi.export(params).then(res => {
        console.log('导出: ', res)
        if (res.status === 200 && res.data.success) {
          console.log('❤ 返回链接: ', baseUrl + res.data.data)
          window.open(baseUrl + res.data.data, '_blank')
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },

  }
}
</script>

<style lang="less" scope>
</style>
